<template>
  <div class="home">
    <div class="banner wrap">
      <ul>
        <li v-for="(i, index) in bannerImgs" :key="index" v-show="index == n">
          <img :src="i.url" />
        </li>
      </ul>
    </div>
    <!-- 首页主体 -->
    <div class="content">
      <div class="wrap">
        <!--精品推荐  -->
        <JfTitle titles="精品推荐" :imgSrc="titImg1"></JfTitle>
        <List :arr="jingpinArr" maxLength="4"></List>
        <!--热门兑换  -->
        <JfTitle class="hotTitle" titles="热门兑换" :imgSrc="titImg2"></JfTitle>
        <!--广告图片 -->
        <img style="margin: 5px 0 20px 0;border-radius: 15px;" src="../assets/img/banner4.png" alt="" />
        <List :arr="remenArr" maxLength="8"></List>
      </div>
    </div>
    <!-- 积分攻略 -->
    <div class="Jf wrap">
      <JfTitle titles="积分攻略" :imgSrc="titImg3"></JfTitle>
      <ul class="JiFen">
        <li :style="{ backgroundImage: `url(${jifenImg1})` }">
          <h3>签到得鸡腿</h3>
          <div><a href="#">去签到</a></div>
        </li>
        <li :style="{ backgroundImage: `url(${jifenImg2})` }">
          <h3>购课得鸡腿</h3>
          <div><a href="#">去购课</a></div>
        </li>
        <li :style="{ backgroundImage: `url(${jifenImg3})` }">
          <h3>推荐得鸡腿</h3>
          <div><a href="#">去推荐</a></div>
        </li>
        <li :style="{ backgroundImage: `url(${jifenImg4})` }">
          <h3>做任务得鸡腿</h3>
          <div><a href="#">做任务</a></div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { jingpinAPI, HotPinAPI } from "@/request/api.js";
import List from "@/components/home/List";
import JfTitle from "@/components/home/JfTitle";
export default {
  name: "HomeView",
  data() {
    return {
      //轮播图
      bannerImgs: [
        { url: require("@/assets/img/banner2.png") },
        { url: require("@/assets/img/banner5.png") },
        { url: require("@/assets/img/banner3.png") },
      ],
      //JfTitle 组件的图片资源
      titImg1: require("@/assets/img/jingpin.png"),
      titImg2: require("@/assets/img/hot.png"),
      titImg3: require("@/assets/img/score.png"),
      //积分攻略图片资源
      jifenImg1: require("../assets/img/integral-01.9386d4bf.png"),
      jifenImg2: require("../assets/img/integral-02.150d92a1.png"),
      jifenImg3: require("../assets/img/integral-03.9870f3f1.png"),
      jifenImg4: require("../assets/img/integral-04.afadcbdf.png"),
      //精品推荐数组
      jingpinArr: [],
      //热门兑换数组
      remenArr: [],
      n: 0,
      timer: null,
    };
  },
  components: {
    List,
    JfTitle,
  },
  methods: {
    paly: function () {
      this.timer = setInterval(() => {
        this.n++;
        if (this.n === this.bannerImgs.length) {
          this.n = 0;
        }
        console.log(1111);
      }, 2500);
    },
  },
  mounted() {
    this.paly();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  async created() {
    //调用jingpinAPI发送请求
    let res = await jingpinAPI();
    this.jingpinArr = res.data.data.records;
    //调用热门兑换API发送请求
    let HotRes = await HotPinAPI();
    this.remenArr = HotRes.data.data.records;
    console.log(HotRes);
  },
};
</script>
<style lang="less" scoped>
.banner {
  width: 1200px;
  height: 400px;


  ul {
    li {
      img {
        width: 100%;
        height: 400px;
        border-radius: 16px;
      }
    }
  }
}

.content {
  background-color: #f5f5f5;

  .wrap {
    .hotTitle {
      margin-top: -20px;
    }
  }
}

.Jf {
  .JiFen {
    display: flex;
    justify-content: space-between;
    padding-bottom: 30px;

    li {
      width: 285px;
      height: 168px;
      color: #fff;
      padding: 20px 10px;
      box-sizing: border-box;
      cursor: pointer;
      transition: background-size 0.2s ease;
      background-size: 100% 100%;
      border-radius: 15px;

      &:hover {
        background-size: 105% 105%;
      }

      h3 {
        font-size: 24px;
        font-family: SourceHanSansSC, SourceHanSansSC-Bold;
        font-weight: 700;
        margin-top: 35px;
        margin-bottom: 19px;
      }

      div {
        width: 96px;
        height: 27px;
        line-height: 27px;
        border: 1px solid #ffffff;
        text-align: center;

        a {
          text-decoration: none;
          font-size: 16px;
          font-family: SourceHanSansSC, SourceHanSansSC-Light;
          font-weight: 300;
          color: #fff;
        }
      }
    }
  }
}
</style>